<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
    <%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <jsp:include page="header.jsp" />
    <link rel="stylesheet" href="<%=basePath%>css/hotslaes.css">
    <title>耶回收登录</title>
</head>
<body>
<!--商品模块-->
<div class="container yeah-hotsales" id="yeah-hotsales">
    <!--一级导航-->
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div class="lv1-nav lv1-nav-active">手机</div>
            <div class="lv1-nav">台式电脑</div>
            <div class="lv1-nav">笔记本</div>
            <div class="lv1-nav">平板电脑</div>
            <div class="lv1-nav">电脑配件</div>
        </div>
    </div>
    <!--一级导航 end-->
    <!--二级导航-->
    <div class="row clearfix">
        <div class="col-md-12 column" id="yeah-nav-no" >
            <div class="lv2-nav" v-for=" item in items">
                <a :href="item.url">
                    <img :src=" item.img">
                </a>
            </div>
            <!--更多-->
            <div class="lv2-nav"><a href="#001" style="font-size:50px;color:#333;">···</a></div>
            <!--更多 end-->
        </div>
    </div>
    <!--二级导航 end-->
    <!--三级-回收商品图片-->
    <div class="row clearfix" style="margin-top:10px;">
        <div class="col-md-12 column">
            <div class="row clearfix" id="yeah-nav-no-2">
                <!--循环-->
                <c:forEach items="${list2 }" var="list">
                <div class="col-md-3 col-sm-6 col-xs-6 column">
                    <a href="#101">
                    <img class="goods_img"  alt="140x140" src="img/${list.img_url }" />
                    </a>
                    <div style="text-align: center;">${list.iphone }</div>
                    <div style="text-align: center;margin-top:10px;">最高回收价:
                        <span style="color:#ff7000;font-weight: bold">￥:${list.price }</span>
                    </div>
                </div>
                </c:forEach>
                <!--循环 end-->
            </div>
        </div>
    </div>
    <!--回收商品图片 end-->
</div>
<!--商品模块 end-->
<script>
var flag=0;  //一级导航标记
$.getJSON("showbrand",function (hotsales_nav,status) {

    var vm = new Vue({
        el:'#yeah-nav-no',
        data: {
            items : hotsales_nav[flag].list// 一级导航栏和二级导航栏的数据  来源json/hotslaes_nav.json
        }
    })
    var o_lv1_nav_s = document.getElementsByClassName("lv1-nav");
    for(var i=0;i<5;i++){
        o_lv1_nav_s[i].index =i;
        o_lv1_nav_s[i].onclick=function () {
            flag=this.index;
            vm.items=hotsales_nav[flag].list;
            for(var j=0;j<5;j++){
                o_lv1_nav_s[j].className="lv1-nav";
                
            }
            this.className="lv1-nav lv1-nav-active";
        }
    }
});

</script>

</body>
</html>